<template>
  <view class="page">
    <view class="bg-color"></view>
    <view class="main">
      <view class="bg-white padding">
        <u-text bold size="36rpx" color="#333" text="我的错题本"></u-text>
        <view class="subject-item" v-for="item in subjectList" :key="item.id" @click="goToKnowledge(item)">
          <image class="icon" :src="item.img" mode="aspectFit"></image>
          <view class="flex-1 margin-left">
            <u-text bold :text="item.name" size="32rpx" color="#000"></u-text>
            <u-text margin="10rpx 0 0 0" :text="`错题总数:${item.mistakes}个`" size="28rpx" color="#999"></u-text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const subjectList = ref([
  {
    id: 2,
    name: '语文',
    mistakes: 10,
    img: '/static/image/img-chinese-bg.png'
  },
  {
    id: 1,
    name: '数学',
    mistakes: 10,
    img: '/static/image/img-math-bg.png'
  },
  {
    id: 3,
    name: '英语',
    mistakes: 10,
    img: '/static/image/img-english-bg.png'
  }
]);

const goToKnowledge = (item) => {
  uni.navigateTo({
    url: `/pages/common/knowledge/knowledge?name=${item.name}&subject=${item.name}&id=${item.id}`
  });
};
</script>
<style scoped lang="scss">
.bg-color {
  background: linear-gradient(to bottom, rgba(255, 159, 25, 0.1), rgba(255, 159, 25, 0.05));
  width: 100%;
  height: 20rpx;
}

.subject-item {
  width: 100%;
  height: 180rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  box-sizing: border-box;

  .icon {
    width: 180rpx;
    height: 180rpx;
  }
}
</style>